<template>
  <div class="bingtu">
    <div class="chart">
      <canvas id="container" height="280" width="328"></canvas>
    </div>
  </div>
</template>

<script>
import F2 from '@antv/f2/lib/index-all'
import _ from 'lodash'
export default {
  components: {},
  data() {
    return {}
  },
  mounted() {
    // this.showChart()
    this.showChart()
  },
  methods: {
    // 图表数据初始化
    showChart() {
      // 格式化数字
      function numberToMoney(n) {
        return String('该项' + n + '分')
      }

      const data = [
        {
          item: '美食',
          user: '本月您的智慧生活综合情况为',
          score: 100
        },
        {
          item: '智能',
          user: '本月您的智慧生活综合情况为',
          score: 50
        },
        {
          item: '安防',
          user: '本月您的智慧生活综合情况为',
          score: 40
        },

        {
          item: '节能',
          user: '本月您的智慧生活综合情况为',
          score: 60
        },

        {
          item: '环境',
          user: '本月您的智慧生活综合情况为',
          score: 70
        }
      ]
      const chart = new F2.Chart({
        id: 'container',
        pixelRatio: window.devicePixelRatio
      })

      chart.coord('polar')
      chart.source(data, {
        score: {
          min: 0,
          max: 100,
          nice: false,
          tickCount: 5,
          formatter: function formatter(val) {
            return numberToMoney(val)
          }
        }
      })
      chart.tooltip({
        custom: true, // 自定义 tooltip 内容框
        onChange: function onChange(obj) {
          const legend = chart.get('legendController').legends.top[0]
          const tooltipItems = obj.items
          const legendItems = legend.items
          const map = {}
          legendItems.forEach(function(item) {
            map[item.name] = _.clone(item)
          })
          tooltipItems.forEach(function(item) {
            const name = item.name
            const value = item.value
            if (map[name]) {
              map[name].value = value
            }
          })
          legend.setItems(_.values(map))
        },
        onHide: function onHide() {
          const legend = chart.get('legendController').legends.top[0]
          legend.setItems(chart.getLegendItems().country)
        }
      })
      // chart.axis('score', {
      //   label: function label(text, index, total) {
      //     if (index === total - 1) {
      //       return null
      //     }
      //     return {
      //       top: true
      //     }
      //   },
      //   grid: function grid(text) {
      //     if (text === '100') {
      //       return {
      //         lineDash: null
      //       }
      //     }
      //   },
      //   line: {
      //     top: false
      //   }
      // })
      chart.axis('score', {
        label: null,
        grid: function grid(text, index, total) {
          if (index === total - 1) {
            return {
              stroke: 'rgb(207, 226, 255)',
              strokeOpacity: 1,
              lineDash: null,
              lineWidth: 1.5
            }
          }
          return {
            lineDash: null,
            stroke: 'rgb(207, 226, 255)',
            strokeOpacity: 0.6,
            lineWidth: 1
          }
        }
      })
      chart.axis('item', {
        label: {
          fontSize: 12
        },
        grid: {
          stroke: 'rgb(207, 226, 255)',
          strokeOpacity: 0.8,
          lineDash: null
        }
      })
      // chart
      //   .area()
      //   .position('item*score')
      //   .color('user')
      //   .animate({
      //     appear: {
      //       animation: 'groupWaveIn'
      //     }
      //   })
      chart
        .area()
        .position('item*score')
        .color('user')
        .style({
          fillOpacity: 0.4
        })
      chart
        .line()
        .position('item*score')
        .color('user')
        .animate({
          appear: {
            animation: 'groupWaveIn'
          }
        })
      chart
        .point()
        .position('item*score')
        .color('user')
        .style({
          stroke: '#fff',
          lineWidth: 1
        })
        .animate({
          appear: {
            delay: 300
          }
        })

      chart.render()
    }
  }
}
</script>

<style></style>
